<template>
  <view class="steps-bar">
    <view
      :class="[
        'step',
        curIdx >= idx ? 'is-active' : '',
        step?.isError ? 'is-error' : '',
      ]"
      v-for="(step, idx) in stepList"
      :key="step.text"
    >
      <text class="cur-idx">
        {{ idx + 1 }}
      </text>
      <text class="cur-text">
        {{ step.text }}
      </text>
      <view
        v-if="
          (stepList.length === 3 && idx + 1 !== 3) ||
          (stepList.length !== 3 && !step.isEnd)
        "
        class="line"
      />
    </view>
  </view>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  stepList: {
    type: Array,
    default: [],
  },
  curIdx: {
    type: Number,
    default: -1,
  },
});
</script>
<style scoped lang=less>
@import "./style/steps-bar";
</style>
